<style lang="scss">
$left: 30rpx;

.index-nearby-cinema {
	margin: 0 $left;
	border: 1px solid rgb(229, 229, 229);
	box-shadow: 0rpx 3rpx 43rpx 0rpx rgba(4, 0, 0, .13);
	border-radius: 20rpx;
	background-color: #FFF;
}

.index-nearby-cinema-title {
	padding: 0 30rpx 0 34rpx;
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgb(255, 251, 235);
	border-radius: 20rpx 20rpx 0 0;
}

.index-nearby-cinema-title-value {
	font-size: 36rpx;
	font-weight: bold;
}

.index-nearby-cinema-border {
	width: 100%;
	border-top: 2rpx dashed rgba(0, 0, 0, .1);
}

.index-nearby-cinema-content {
	display: flex;
	padding: 44rpx 46rpx 70rpx 34rpx;
	justify-content: space-between;
}

.index-nearby-cinema-content-left {
	width: calc(100% - 100rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.index-nearby-cinema-content-title {
	font-size: 32rpx;
	font-weight: 600;
}

.index-nearby-cinema-content-address {
	font-size: 28rpx;
	color: #7B7B7B;
}

.index-nearby-cinema-content-distance {
	font-size: 24rpx;
	color: #7B7B7B;
}

.index-nearby-cinema-thumb {
	position: relative;
}

.index-nearby-cinema-thumb image,
.index-nearby-cinema-thumb view {
	width: 94rpx;
	height: 116rpx;
	border-radius: 10rpx;
}

.index-nearby-cinema-thumb view {
	position: absolute;
}

.index-nearby-cinema-thumb-value {
	display: block;
	position: relative;
	z-index: 10;
	background-color: #FFF;
}

.index-nearby-cinema-thumb-shadow-0 {
	z-index: 9;
	top: 9rpx;
	left: 9rpx;
	background: rgba(0, 0, 0, .5);
}

.index-nearby-cinema-thumb-shadow-1 {
	z-index: 8;
	top: 18rpx;
	left: 18rpx;
	background: rgba(0, 0, 0, .1);
}
</style>

<template>
	<view class="index-nearby-cinema">

		<view class="index-nearby-cinema-title">
			<view class="index-nearby-cinema-title-value">离你最近的影院</view>
			<arrow-right-black class="index-nearby-cinema-title-icon"></arrow-right-black>
		</view>

		<view class="index-nearby-cinema-border"></view>

		<view class="index-nearby-cinema-content">

			<view class="index-nearby-cinema-content-left">

				<view class="index-nearby-cinema-content-title" v-text="name"></view>

				<view class="index-nearby-cinema-content-address" v-text="address"></view>

				<view class="index-nearby-cinema-content-distance"><text v-text="distance" /><text v-text="distanceUnit" /></view>

			</view>

			<view class="index-nearby-cinema-thumb">
				<image class="index-nearby-cinema-thumb-value" :src="thumb"></image>

				<view class="index-nearby-cinema-thumb-shadow-0"></view>

				<view class="index-nearby-cinema-thumb-shadow-1"></view>
			</view>

		</view>

	</view>
</template>

<script>
export default {

	props: {

		name: {
			type: String,
			required: true,
		},

		address: {
			type: String,
			required: true,
		},

		distance: {
			type: String,
			required: true,
		},

		distanceUnit: {
			type: String,
			default: "米",
		},

		thumb: {
			type: String,
			default: false,
		},
	}

}
</script>